<template>
  <el-container class="my-layout" direction="vertical">
    <el-header class="header">
      <div class="header-left">
        <img class="logo" src="http://cola.icelery.fun/img/logo.0ffc67a6.png" />
        <div class="header-left-txt">
          天幕 Designer
        </div>
      </div>
      <div class="header-right">
        <div class="nav-item">
          <el-dropdown @command="handleCommand">
            <span class="nav-avatar">
              <span class="nav-avatar__string">{{userFirstName}}</span>
              <div class="nav-avatar__text">
                <span class="nav-avatar__name">{{ currentUser.username }}</span>
                <span class="nav-avatar__extra"></span>
              </div>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                <el-dropdown-item divided command="exit">退出</el-dropdown-item>
              </el-dropdown-menu>
            </span>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="230px">
        <el-menu :default-active="defaultActive" @select="onSelect" style="height: 100%;">
          <template v-for="(menu, index) in menus">
            <el-submenu v-if="menu.children && menu.children.length > 0" :key="index" :index="index+''">
                  <template slot="title">
                    <i :class="menu.icon"></i>
                    {{menu.name}}
                  </template>

              <el-menu-item v-for="item in menu.children" :index="item.url" :key="item.url">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="menu.url" :key="menu.url">
              <i :class="menu.icon"></i>
              <span slot="title">{{ menu.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-main class="my-layout-main">
        <router-view :key="key"/>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
import lodash from 'lodash'
import {manageMenus} from '@/router'
import {removeToken} from "@/utils/auth";
import {postReportDictitemListAll} from "@/api/dict";
import {getUserFromCache, removeTokenFromCache} from "@/helper/utils";
import {logout} from "@/api/user";

export default {
  name: "Layout",
  data() {
    return {
      menus: [
        {
          name: '大屏管理',
          icon: 'my-icon icon-lcd',
          children: [
            {name: '大屏管理', icon: 'my-icon icon-lcd', url: '/dashboard'},
            {name: '图片管理', icon: 'my-icon icon-image', url: '/image'}
          ]
        },
        {
          name: '数据管理',
          icon: 'my-icon icon-data-management',
          children: [
            {name: '数据源', icon: 'my-icon icon-database', url: '/dataSource'},
            {name: '数据集', icon: 'my-icon icon-components-fill', url: '/dataSet'}
          ]
        }
      ],
      defaultActive: ''
    }
  },
  created() {
    this.queryDictName()
  },
  computed: {
    key() {
      return this.$route.path
    },
    manageMenus() {
      return manageMenus
    },
    currentUser() {
      return getUserFromCache().user
    },
    userFirstName() {
      let name = this.currentUser.username
      if(name) {
        name = name.substr(0, 1).toUpperCase()
      }
      return name
    }
  },
  methods: {
    initMenuKey() {
      const matched = this.$route.matched.slice(0).pop()
      this.defaultActive = matched.path
    },
    redirectMenu(item) {
      this.$router.push(item.path)
    },
    onSelect(index, path) {
      this.$router.push(path[1]).catch(e => e)
    },
    queryDictName() {
      postReportDictitemListAll({enable: 1, locale: 'zh'}).then(res => {
        const obj = lodash.groupBy(res, 'dictCode')
        localStorage.setItem('REPORT_DICT', JSON.stringify(obj))
      })
    },
    handleCommand(name) {
      name = lodash.upperFirst(name)
      this['on' + name]()
    },
    onExit() {
      logout().then(_ => {
        removeTokenFromCache()
        removeToken()
        this.$router.push('/login');
      })
    }
  },
  mounted() {
    this.initMenuKey()
  }
}
</script>

<style lang="less" scoped>
.my-layout {
  height: 100%;

  &-main {
    padding: 0px;
  }
}
.header {
  box-shadow: rgb(221 221 221) 0px -1px 1px 0px inset;

  &-left {
    height: 100%;
    width: 210px;
    float: left;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .logo {
      height: 50px;
      width: 50px;
    }
    &-txt {
      margin-left: 8px;
      color: #fff;
      text-shadow: #409eff 1px 1px 4px, #409eff 2px 2px 9px, #409eff 2px 2px 9px;
      font-size: 20px;
    }
  }
  &-right {
    height: 100%;
    float: right;
  }
}

.nav-item {
  display: inline-block;
  padding: 0 12px;
  cursor: pointer;
  transition: all .3s;
  line-height: 60px;
  vertical-align: top;

  .nav-avatar {
    margin-right: 8px;
    height: 60px;
    display: inline-block;

    &__string {
      margin-right: 8px;
      position: relative;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
      vertical-align: middle;
      width: 32px;
      height: 32px;
      line-height: 32px;
      border-radius: 100%;
      color: #bae7ff;
      background: #096dd9;
    }
    &__text {
      display: inline-block;
      line-height: 1em;
      vertical-align: middle;
    }
    &__name {
      display: block;
      font-size: 1rem;
    }
    &__extra {
      margin-top: 2px;
      display: block;
      font-size: 12px;
      opacity: .7;
    }
  }
}

/deep/ .el-submenu {
  .my-icon {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
  }
}
</style>
